<template>
	<view>
		<cu-custom bgColor="bg-gradual-green"><block slot="content">分享</block></cu-custom>
		<view class="canvas">
		<canvas :style="{ width: cansWidth + 'px', height: cansHeight + 'px' }" canvas-id="firstCanvas"></canvas>
		</view>
			<view class="imglist">
				<view :style="[{ width:widths+'upx'}]">
				<block v-for="(swiperLists,index) in swiperList" :key="index">
					<image @click="selseimg(swiperLists.posterImg)" :src="swiperLists.posterImg" mode="aspectFill"></image>
				</block>
				</view>
			</view>
			<view class="bottom">
					<view @click="saveCans(1)">保存海报</view>
					<view @click="saveCans(2)">一键邀请</view>
			</view>
			
		<!-- <jc-popUp position="bottom" ref="pop1" markTapHide="true" closeIcon="false">
		<view class="tishi-box">
			<view class="tishi-box-a" @click="weixin">
				<image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1068316074,4162025599&fm=26&gp=0.jpg" mode="scaleToFill"></image>
				<view>微信好友</view>
			</view>
			<view class="tishi-box-a" @click="bengyouquan">
				<image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1068316074,4162025599&fm=26&gp=0.jpg" mode="scaleToFill"></image>
				<view>朋友圈</view>
			</view>
			<view class="tishi-box-a" @click="qq">
				<image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1068316074,4162025599&fm=26&gp=0.jpg" mode="scaleToFill"></image>
				<view>QQ</view>
			</view>
		</view>
		</jc-popUp> -->
	</view>
</template>

<script>
	var that
	// import jcPopUp from '../component/tankuang/jc-popUp/jc-popUp.vue'; //分享弹框，插件地址  https://ext.dcloud.net.cn/plugin?id=249
	export default {
		// components: {jcPopUp},
		data() {
			return {
				cansWidth: 280, //海报宽度
				cansHeight: 400, //海报高度
				widths:"",//图片列表动态宽度
				imgsrc:"",//保存图片的路径
				userdata:{},//个人数据
				swiperList: []//海报数组
			};
		},
		onLoad:function(){
			that=this
			that.huizhihaibao() //请求海报数据
		},
	    methods:{
			huizhihaibao(){
				uni.showLoading({
					title: '加载中'
				});
				
				that.userdata={
					img:"https://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg",
					erweima:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2482847312,3535687336&fm=26&gp=0.jpg",
					text:"asdftdhghkhjljk"
				}
				that.swiperList=[
					{posterImg: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2131156127,2347794592&fm=26&gp=0.jpg"},
					{posterImg: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373850336,630695277&fm=26&gp=0.jpg"},
					{posterImg: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3939542844,3724400024&fm=26&gp=0.jpg"}
				]
				 
				 uni.hideLoading();
				 //数据请求结束
				 
				 setTimeout(function(){  //定时器，海报方法不能立即执行，等页面渲染完成
					that.selseimg("https://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg") 
				},2000);
				
			},
			selseimg(e){  //绘制海报
				if(that.userdata.text.length>3){   //昵称太长加省略号
					that.userdata.text=that.userdata.text.slice(0,3)+"..."
				}
				
				uni.showLoading({
					title: '生成海报中'
				});
				const context = uni.createCanvasContext('firstCanvas')
					  
				  context.drawImage(e,0,0,280,400)  //海报背景
				  context.drawImage("https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1606276183&di=f90eb6ac625c632743233c4806606fa5&src=http://image.biaobaiju.com/uploads/20180303/00/1520009784-CHBAVzsbRS.jpg",10,280,260,110)  //个人信息背景
				  context.drawImage(that.userdata.erweima,182,304,75,75)//二维码图片
					
				  context.setFillStyle('#333333')
				  context.setFontSize(12)
				  context.fillText('我的邀请码',190,296)
				  context.fill()
				  
				  context.setFillStyle('#333333')
				  context.setFontSize(20)
				  context.fillText(that.userdata.text,80,335)  //昵称
				  context.fill()
				  
				  context.setFillStyle('#666666')
				  context.setFontSize(12)
				  context.fillText('邀请你加入拾金，',80,355)
				  context.fillText('手机就能赚钱！',80,375)
				  context.fill()
				
				context.save()
				context.beginPath()
				context.arc(44, 350, 25, 0, 2 * Math.PI)
				context.clip()
				context.drawImage(that.userdata.img, 17, 322,55,55)//头像
				context.restore()
				context.draw()
				
				uni.hideLoading();
			},
			saveCans(e){   //保存海报
				uni.showLoading({
					title: '保存海报中'
				});
				
				console.log('保存');
				let tempRatio = 1.5;
				
				// #ifdef H5 || APP-PLUS
				tempRatio = 1;
				// #endif
				
				uni.canvasToTempFilePath({
				  x: 0,
				  y: 0,
				  width:that.cansWidth*tempRatio,
				  height:that.cansHeight*tempRatio,
				  destWidth:that.cansWidth*tempRatio*2,
				  destHeight:that.cansHeight*tempRatio*2,
				  canvasId:'firstCanvas',
				  success: function(res){
					uni.hideLoading()
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function (red) {
							uni.showToast({
								title:'保存相册成功'
							})
							that.imgsrc=res.tempFilePath
							if(e==2){
								that.gofenxiang()
							}
						},
					  fail(res) {
						if(res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
							uni.showModal({
								title:'您需要授权相册权限',
								success(res) {
									if(res.confirm){
										uni.openSetting({
											success(res) {
											
											},
											fail(res) {
												console.log(res)
											}
										})
									}
								}
							})
						}
					  }
					});
				  },
				  fail(res) {
					  uni.hideLoading()
				  }
				},this)
			},
			gofenxiang(){
				// that.$refs.pop1.show();
			},
			weixin(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 2,
				    imageUrl:that.imgsrc,
				    success: function (res) {
				        console.log(JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log(JSON.stringify(err));
				    }
				});
				that.$refs.pop1.hide();
			},
			bengyouquan(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSenceTimeline",
				    type: 2,
				    imageUrl:that.imgsrc,
				    success: function (res) {
				        console.log(JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log(JSON.stringify(err));
				    }
				});
				that.$refs.pop1.hide();
			},
			qq(){
				uni.share({
				    provider: "qq",
				    type: 2,
				    imageUrl:that.imgsrc,
				    success: function (res) {
				        console.log(JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log(JSON.stringify(err));
				    }
				});
				that.$refs.pop1.hide();
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1;
	}
	.pageHeader{
		height: var(--status-bar-height);	
		background-color: #FFFFFF;
	}	
	.box-header{
		position: fixed;
		top: 0upx;
		width: 100%;
		z-index: 100;
	}
	.top-box{
		height: 100upx;
		width: 100%;
	}
	
	.canvas{
		
		display: flex;
		justify-content: center;
	}
	.bottom{
		padding: 20upx 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		background-color:#ffffff;
	}
	.bottom view:first-child{
		padding: 20upx 60upx;
		background:#FF8A00;
		border-radius:44upx;
		font-size:30upx;
		color:#FFFFFF;
		}
	.bottom view:last-child{
		padding: 20upx 60upx;
		background:#FF5256;
		border-radius:44upx;
		font-size:30upx;
		color:#FFFFFF;
		}
	.imglist{
		width:100%;
		padding: 20upx 0;
		overflow:auto;
		/* background-color: #ffffff; */
	}
	.imglist view{
		display:flex;
		justify-content:space-around;
	}
	.imglist image{
		width:200upx;
		height:200upx;
		border-radius: 10upx;
	}
	.tishi-box{
			 display: flex;
			 align-items: center;
			 justify-content: space-around;
			 background-color: #FFFFFF;
			 position: fixed;
			 bottom: 0;
			 width: 100%;
			 height:260upx;
			 background:#FFFFFF;
			 border-radius:20upx 20upx 0upx 0upx;
			 text-align: center;
	}
	.tishi-box view{
			 font-size:28upx;
			 font-family:PingFang SC;
			 font-weight:500;
			 color:#333333;
			 line-height:50upx;
	}
	.tishi-box image{
			 width:100upx;
			 height:100upx;
			 border-radius:50%;
			 }
</style>
